<template>
	<view class="data-manage">
		<u-tabs name="cate_name" :list="list" :is-scroll="false" :current="current" bar-width="120" @change="change" bg-color="#f9f9f9" style="margin: 20rpx 0;"></u-tabs>
		<view class="page">
			<!-- 概况数据 -->
			<view class="generaliza" v-if="current == 0">
				<!-- 核心数据 -->
				<view class="data page-item">
					<view class="page-item_head">
						<view class="head-top">
							<text>核心数据</text>
						</view>
						<view class="head-option">
							<date-select :needRealTime="true"></date-select>
						</view>
					</view>
					<view class="data-content" v-if='true'>
						<view class="data-money">
							<view class="data-money_top"><text>支付金额</text></view>
							<view class="data-money_middle"><text>￥0</text></view>
							<view class="data-money_bottom"><text>昨日 ￥1.00</text></view>
						</view>
						<view class="data-info">
							<view class="data-item">
								<view class="data-item_top"><text>买家数</text></view>
								<view class="data-item_middle"><text>0</text></view>
								<view class="data-item_bottom"><text>昨日 1</text></view>
							</view>
							<view class="data-item">
								<view class="data-item_top"><text>访客数</text></view>
								<view class="data-item_middle"><text>0</text></view>
								<view class="data-item_bottom"><text>昨日 1</text></view>
							</view>
							<view class="data-item">
								<view class="data-item_top"><text>订单数</text></view>
								<view class="data-item_middle"><text>0</text></view>
								<view class="data-item_bottom"><text>昨日 1</text></view>
							</view>
							<view class="data-item">
								<view class="data-item_top"><text>访问量</text></view>
								<view class="data-item_middle"><text>0</text></view>
								<view class="data-item_bottom"><text>昨日 1</text></view>
							</view>
						</view>
					</view>
					<view class="noData" v-else><text>数据统计中，请稍后查看</text></view>
				</view>
				<!-- 历史趋势 -->
				<view class="history page-item">
					<view class="page-item_head">
						<view class="head-top">
							<text>历史趋势</text>
						</view>
						<view class="head-option">
							<!-- 数据类型 -->
							<view class="head-option_son">
								<view class="head-option_son-left">
									<text>数据类型</text>
								</view>
								<view class="head-option_son-right">
									<u-input class="right-input" type="select" placeholder="请选择商品类型" :select-open="historyTypeShow" v-model="historyDateType" @click="historyTypeShow = true"></u-input>
									<u-action-sheet :list="historyTypeList" v-model="historyTypeShow" @click="selectCallback()"></u-action-sheet>
								</view>
							</view>
							<!-- 日期范围 -->
							<view class="head-option_son">
								<view class="head-option_son-left">
									<text>日期范围</text>
								</view>
								<view class="head-option_son-right">
									<list-select :list="historyDateList" @wen="historyDateCheck"></list-select>
									<view class="history-date_custom" v-if="historyDateSelected == 2">
										111111111111122222222222
									</view>
								</view>
							</view>
							<view style="height: 36rpx; border-bottom:#f3f3f3 1px solid" v-if="historyDateSelected == 2"></view>
						</view>
					</view>
					<view class="history-content" v-if='true'>
						<line-charts></line-charts>
					</view>
					<view class="noData" v-else><text>数据统计中，请稍后查看</text></view>
				</view>
			</view>
			
			<!-- 商品数据 -->
			<view class="goods page-item" v-if="current == 1">
				<view class="goods-data">
					<view class="page-item_head">
						<view class="head-top">
							<text>核心数据</text>
						</view>
						<view class="head-option">
							<view class="head-option_son">
								<view class="head-option_son-left">
									<text>数据类型</text>
								</view>
								<view class="head-option_son-right">
									<list-select :list="targetList" @wen="check"></list-select>
								</view>
							</view>
							<date-select :needRealTime="true"></date-select>
						</view>
					</view>
				</view>
				<view class="goods-content" v-if='true'>
					<view class="goods-content_top">
						<text>商品名称</text>
						<text>支付</text>
					</view>
					<view class="goods-content_middle" v-for="(item,index) in 4">
						<view class="goods-name">
							<text>是否各位</text>
						</view>
						<view class="goods-pay">
							<text>￥1.00</text>
						</view>
					</view>
				</view>
				<view class="noData" v-else><text>暂无数据</text></view>
			</view>
			
			<!-- 来源数据 -->
			<view class="origin page-item" v-if="current == 2">
				<view class="origin-data">
					<view class="page-item_head">
						<view class="head-top">
							<text>核心数据</text>
						</view>
						<view class="head-option">
							<view class="head-option_son">
								<view class="head-option_son-left">
									<text>数据类型</text>
								</view>
								<view class="head-option_son-right">
									<list-select :list="targetList" @wen="check"></list-select>
								</view>
							</view>
							<date-select :needRealTime="true"></date-select>
						</view>
					</view>
				</view>
				<view class="origin-content" v-if='true'>
					<view class="origin-content_top">
						<text>来源名称</text>
						<view class="origin-content_top-right">
							<text>占比</text>
							<text>订单</text>
						</view>
					</view>
					<view class="origin-content_middle" v-for="(item,index) in 4">
						<view class="origin-name">
							<text>小程序订单</text>
						</view>
						<view class="origin-right">
							<view class="origin-chart">
								<view class="chart-blue" style="width: 50%"></view>
							</view>
							<view class="origin-ratio">
								<text>100%</text>
							</view>
							<view class="origin-order">
								<text>1</text>
							</view>
						</view>
					</view>
				</view>
				<view class="noData" v-else><text>暂无数据</text></view>
			</view>
		</view>
		<!-- <date-select-mask></date-select-mask> -->
	</view>
</template>



<script>
	import dateSelect from './components/date-select/date-select.vue'
	// import dateSelectMask from './components/date-select-mask/date-select-mask.vue'
	import listSelect from './components/list-select/list-select.vue'
	export default {
		components:{
			dateSelect,
			// dateSelectMask,
			listSelect
		},
		data() {
			return {
				show: true,
				list: [{                                          //顶部section选项列表
					cate_name: '概况'
				}, {
					cate_name: '商品'
				}, {
					cate_name: '来源'
				}],
				current: 0,                                       //顶部section选择
				historyDateType:'支付金额',
				historyTypeShow:false,
				historyTypeList:[
					{text: '支付金额'},
					{text: '访问次数'},
					{text: '访问人数'},
					{text: '订单数'},
					{text: '打开次数'},
					{text: '购买人数'},
					{text: '新打开人数'},
				],
				historyDateList:['近7天','近30天','自定义'],       //历史趋势日期范围选项列表
				historyDateSelected: 0,                           //历史趋势日期范围选择,等于2时弹出自定义框
				targetList:['支付','订单','访客'], 				  //统计指标选项列表
				
				
			}
		},
		methods: {
			//顶部section改变
			change(index) {
				this.current = index;
			},
			//历史趋势日期类型选择
			historyDateCheck(e){
				this.historyDateSelected = e
			},
			check(e){
				console.log(e);
			},
			selectCallback(e){
				this.historyDateType = this.historyTypeList[e].text
			}
		}
	}
</script>

<style scoped lang="scss">
	.data-manage{
		.page{
			margin: 0 20rpx;
			.page-item{
				padding: 30rpx 20rpx;
				margin: 20rpx 0;
				border: 1px solid #f0f0f0;
				border-radius: 20rpx;
				background-color: #fff;
				.page-item_head{
					.head-top{
						font-weight: 700;
						font-size: 15px;
					}
					.head-option{
						.head-option_son{
							display: flex;
							margin: 40rpx 0;
							height: 30rpx;
							line-height: 30rpx;
							font-size: 13px;
							color: #9e9e9e;
							.head-option_son-left{
								width: 140rpx;
							}
							.head-option_son-right{
								position: relative;
								display: flex;
								align-items: center;
								margin-left: 20rpx;
								.right-input{
									margin-bottom: 4rpx;
									width: 180rpx;
								}
							}
						}
					}
				}
			}
			
			//概括数据
			.generaliza{
				.data{
					.data-content{
						.data-money{
							padding: 30rpx 0 30rpx 30rpx;
							border-bottom: 1px solid #e5e5e5;
							border-top: 1px solid #e5e5e5;
							font-size: 13px;
							color: #9e9e9e;
							.data-money_middle{
								margin: 20rpx 0;
								font-size: 20px;
								color: #000;
								font-weight: 700;
							}
						}
						.data-info{
							display: flex;
							flex-wrap: wrap;
							padding: 30rpx;
							.data-item{
								margin: 20rpx 0;
								width: 50%;
								font-size: 13px;
								color: #9e9e9e;
								.data-item_middle{
									margin: 10rpx 0;
									font-size: 20px;
									color:#000;
									font-weight: 700;
								}
							}
						}
					}
				}
				.history{
					.history-date_custom{
						position: absolute;
						bottom: -40px;
						left: 0;
						width: 350rpx;
						height: 36px;
						text-align: center;
						line-height: 36px;
						color: #000;
					}
				}
			}
			
			//商品数据
			.goods{
				.goods-content{
					.goods-content_top{
						display: flex;
						justify-content: space-between;
						border-bottom: 1px solid #e5e5e5;
						height: 30px;
						font-weight: 700;
					}
					.goods-content_middle{
						display: flex;
						justify-content: space-between;
						margin: 30rpx 0;
					}
				}
			}
			
			//来源数据
			.origin{
				.origin-content{
					.origin-content_top{
						display: flex;
						justify-content: space-between;
						height: 30px;
						font-weight: 700;
						border-bottom: 1px solid #cccccc;
						.origin-content_top-right{
							display: flex;
							width: 30%;
							text{
								display: block;
								text-align: center;
								width: 50%;
							}
						}
					}
					.origin-content_middle{
						display: flex;
						align-items: center;
						.origin-name{
							height: 60rpx;
							line-height: 60rpx;
							width: 50%;
							border-right: 1px solid #cccccc;
						}
						.origin-right{
							display: flex;
							width: 50%;
							.origin-chart{
								width: 40%;
								.chart-blue{
									height: 28rpx;
									background-color: #2ba4f7;
									border-bottom-right-radius: 12rpx;
									border-top-right-radius: 12rpx;
								}
							}
							.origin-ratio{
								text-align: center;
								width: 30%;
							}
							.origin-order{
								text-align: center;
								width: 30%;
							}
						}
						
					}
				}
			}
			
			//没有数据
			.noData{
				width: 100%;
				height: 300rpx;
				line-height: 300rpx;
				text-align: center;
				color: #9e9e9e;
			}
		}
	}
</style>
